<template>
	<view class='page-background' :style="style">
		<image :src="realSrc" mode="widthFix" class="page-background-image" />
	</view>
</template>

<script>
	import {RES_PREFIX} from '@/utils/const.js'
	export default {
		name: 'Background',
		props: {
			src: {
				type: String,
				default(){
					return ""
				}
			},
			height: {
				type: Number,
				default(){
					return 0
				}
			},
			mode: {
				type: String,
				default(){
					return "aspectFill"
				}
			}
		},
		computed: {
			realSrc(){
				if(this.src[0] == '@'){
					return this.src.substring(1)
				}
				return `${RES_PREFIX}${this.src}`
			},
			style(){
				if(this.height == 0){
					return 'height: 100%'
				}
				return `height: ${this.height}rpx`
			}
		}
	}
</script>